<include file="public/header" />
</head>
<body style="background: #fff;">

<!--皮肤更换-->
<div id="skinbox">
  <div class="layui-row">
    <div class="layui-col-md12">
      <form action="" lay-filter="form1" class="layui-form" style="width: 90%;padding: 5%;">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">
              框架颜色
            </label>
            <div class="layui-inline">
              <div class="layui-input-inline" style="width: 140px;">
                <input type="text"  placeholder="请选择颜色" class="layui-input color" id="framecolor" name="framecolor" title="" value="#01AAED" data-class=".layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this > a:hover, .hideMenu, .layui-nav-tree .layui-nav-bar, .layui-nav-itemed:before, .layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this,#nprogress .bar" data-imp="" data-other="1">
              </div>
              <div class="layui-inline" style="left: -11px;">
                <div id="framecolor_show" class="layui-inline">
                </div>
              </div>
              <!--<input type="color" name="framecolor" title="" value="#01AAED" data-class=".layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this > a:hover, .hideMenu, .layui-nav-tree .layui-nav-bar, .layui-nav-itemed:before, .layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this" data-imp="" data-other="1" class="layui-input">-->
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">
              顶部背景
            </label>
            <div class="layui-inline">
              <!--<input type="color" name="topcolor" >-->
              <div class="layui-input-inline" style="width: 140px;">
                <input type="text"  placeholder="请选择颜色" class="layui-input color" id="topcolor" name="topcolor" title="" data-class=".layui-layout-admin .layui-header" data-imp="" value="#23262E">
              </div>
              <div class="layui-inline" style="left: -11px;">
                <div id="topcolor_show" class="layui-inline">
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">
              左侧背景
            </label>
            <div class="layui-inline">
              <div class="layui-input-inline" style="width: 140px;">
                <input type="text"  placeholder="请选择颜色" class="layui-input color" id="leftcolor" name="leftcolor" title="" data-class=".layui-bg-black" data-imp="1"  value="#393D49">
              </div>
              <div class="layui-inline" style="left: -11px;">
                <div id="leftcolor_show" class="layui-inline">
                </div>
              </div>
              <!--<input type="color" name="leftcolor" title="" value="#393D49" data-class=".layui-bg-black" data-imp="1" class="layui-input">-->
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">
              底边选中
            </label>
            <div class="layui-inline">
              <!--<input type="color" name="topbottomcolor" title="" value="#FFD700" data-class=".layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after" data-imp="" class="layui-input">-->
              <div class="layui-input-inline" style="width: 140px;">
                <input type="text"  placeholder="请选择颜色" class="layui-input color" id="topbottomcolor" name="topbottomcolor" title="" data-class=".layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after" data-imp=""  value="#FFd700">
              </div>
              <div class="layui-inline" style="left: -11px;">
                <div id="topbottomcolor_show" class="layui-inline">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">
            三级菜单
          </label>
          <div class="layui-input-block">
            <div class="layui-input-inline" style="width: 140px;">
              <input type="text"  placeholder="请选择颜色" class="layui-input color" id="menucolor" name="menucolor" title="" data-class=".layui-nav-item.layui-nav-itemed" data-imp="1"  value="#2b2e37">
            </div>
            <div class="layui-inline" style="left: -11px;">
              <div id="menucolor_show" class="layui-inline">
              </div>
            </div>
            <!--<input type="color" name="menucolor" title="" value="#2B2E37" data-class=".layui-nav-item.layui-nav-itemed" data-imp="1" class="layui-input">-->
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">内置皮肤</label>
          <div class="layui-input-block system_skin_list">
            <!-- <button class="layui-btn layui-btn-sm">主题1</button>
             <button class="layui-btn layui-btn-sm">主题2</button>
             <button class="layui-btn layui-btn-sm">主题3</button>-->
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <a class="layui-btn makeSkin">制作专属皮肤</a>
            <a class="layui-btn layui-btn-primary defaultSkin">清除皮肤</a>
          </div>
        </div>
        <!--<div class="layui-form-item">
            <label class="layui-form-label">
                顶部选中
            </label>
            <div class="layui-input-block">
                <input type="color" title="" value="#595963" data-class=".topLevelMenus .layui-nav-item.layui-this a" data-imp="" class="layui-input">
            </div>
        </div>-->
      </form>
    </div>
  </div>
</div>
<include file="public/footer" />
<script>
    var url="{:url('System/getSkin')}";
    $.post(url,function(data){
        if(data.has){
            for(let t in data){
                if (-1 !== t.indexOf('color')) {
                    $("#" + t).val(data[t]).change();
                }
            }
            /*form.val('form1',{
                'menucolor':data.menucolor,
                'framecolor':data.framecolor,
                'topcolor':data.topcolor,
                'leftcolor':data.leftcolor,
                'topbottomcolor':data.topbottomcolor
            });*/
        }
    });
    $.post("{:url('System/getSystemSkin')}",function(data){
        var list = '';
        for(var i=0;i<data.length;i++){
            list += '<a data-skinid="'+data[i].id+'" class="layui-btn layui-btn-sm">'+data[i].name+'</a>';
        }
        $(".system_skin_list").html(list);
    });
    $('#skinbox ').on('click',"a[data-skinid]",function(){
        var skid = $(this).data('skinid');
        $.post("{:url('System/getSkinById')}",{'id':skid},function(data){
            for(let t in data){
                if (-1 !== t.indexOf('color')) {
                    $("#" + t).val(data[t]).change();
                }
            }
            /*form.val('form1',{
                'menucolor':data.menucolor,
                'framecolor':data.framecolor,
                'topcolor':data.topcolor,
                'leftcolor':data.leftcolor,
                'topbottomcolor':data.topbottomcolor
            });
            $("input[name=framecolor]").change();*/
        });
    });
     var  old = $('head').find('style').text();
    layui.use(['layer','colorpicker'], function () {
        var layer = layui.layer;
        var $ = layui.$;
        var colorpicker = layui.colorpicker;


        $(".color").on('change',function(){
            var _this = $(this);
            var id = _this.prop('id');
            console.log(id);
            if (id) {
                colorpicker.render({
                    elem: '#' + id + '_show'
                    ,color: _this.val()
                    ,change: function(color){
                        $('#' + id).val(color).change();
                    }
                    ,done: function(color){
                        $('#' + id).val(color).change();
                    }
                });
            }

            var cssStr = '';
            $(".color").each(function(index,n){
                var dom = $(n);
                cssStr += dom.data('class') + "{ background-color: "+dom.val();
                if (dom.data('imp')) {
                    cssStr += "!important;}" + "\n\r";
                } else {
                    cssStr += "}" + "\n\r";
                }
                if (dom.data('other')) {
                    cssStr += ".layui-tab-title .layui-this {color: " + dom.val() + ";border-bottom: 1px solid " + dom.val() +";}\n\r.layui-body {border-top: 5px solid " + dom.val() + ";}\n\r.layui-nav .layui-nav-child a:hover,.ui-context-menu-item a:hover{background-color: "+ dom.val() +";}\n\r.layui-nav .layui-nav-child a:hover, .layui-nav .layui-nav-child dd.layui-this a:hover{background-color: "+ dom.val() +"}\n\r.topLevelMenus .layui-nav-item.layui-this a{background-color: "+ dom.val() +"}\n\r#nprogress .spinner-icon{border-left-color:"+ dom.val() +";border-top-color:"+ dom.val() +";}\n\r#nprogress .peg{box-shadow: 0 0 10px "+ dom.val() +", 0 0 5px "+ dom.val() +";}";
                }
            });
            var head = $("head");
            head.find('style').remove();
            head.append("<style type='text/css'>" +cssStr+ "</style>");
        });
    });
</script>

</body>
</html>